<template>
  <div class="menu-wrapper">
    <div class='top3' style="" ><h1 @click="$router.push({name: 'p-wellcome'})">综合金融平台存管版</h1></div>
    <div class="menu-wrap">
      <el-menu :default-active="currentRouter" class="el-menu-vertical-demo" mode="vertical" theme="dark" :router="true" :unique-opened="true">
        <template v-for="(item, index) in menuList">
          <template v-if='item.subMenus.length>0'>
             <el-submenu :index="item.url" :key="index">
               <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
               <template v-for='(itemSUbmenus ,index) in item.subMenus'>
                 <template v-if='itemSUbmenus.subMenus.length>0'>
                   <el-submenu :index="itemSUbmenus.url" :key="index">
                     <template slot="title"><i class="el-icon-menu"></i>{{itemSUbmenus.name}}</template>
                     <template v-for='(latSubmenus, index) in itemSUbmenus.subMenus'>
                         <el-menu-item :index="latSubmenus.url" :key="index"><i class="el-icon-setting"></i>{{latSubmenus.name}}</el-menu-item>
                     </template>
                   </el-submenu>
                 </template>
                 <template v-else>
                   <el-menu-item :index='itemSUbmenus.url' :key="index"><i class="el-icon-menu"></i>{{itemSUbmenus.name}}</el-menu-item>
                 </template>
               </template>
             </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index='item.url' :key="index"><i class="el-icon-menu"></i>{{item.name}}</el-menu-item>
          </template>
        </template>
   </el-menu>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    components: {

    },
    data() {
      return {
          menuList:[]
      }
    },
    methods: {
      back(path){
         if(path==='usermanage'){
             sessionStorage.setItem('path',JSON.stringify('second'));
         }
      },
      _initInfo(){
        const perfix = 'pj-p2p-user';
        let that = this;
        let params = {
          "pageNo": 1,
          "pageSize": 50
        };
        this.$axios.post(`/${perfix}/admin/user/menu/list`,params).then(function (res) {
            that.menuList = res.data.data;
        }).catch(function (ref) {

        })
      }
    },
    created(){
      this._initInfo();
    },
    computed: {
      currentRouter () {
        return this.$route.path
      }
    }
  }
</script>

<style scoped lang="stylus">
.top3 {
  width: 100%;
  height: 100px;
  background: #324157;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}
  .menu-wrapper
    width: 200px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: auto;
    transition: all .28s ease-out;
    .el-menu-vertical-demo
      width 100%
      height:100%
  .menu-wrap
    width 100%
    height 100%
    /*overflow:-moz-scrollbars-horizontal;*/
  /*margin-top 100px*/
    /*overflow-y scroll*/
  .menu-wrapper::-webkit-scrollbar{width:0}
  .menu-wrapper::-moz-scrollbar{width:0}
.el-menu {
  border-radius: 0 !important;
}


</style>
